<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<%@ include file="../common/header.jsp" %>
<!<!doctype html>
<html>
<head>
    <head>
        <meta charset="UTF-8">
        <title>self-room</title>
        <link rel="stylesheet" href="../css/common.css">
    </head>
</head>
<body>
<main>
    <%
        if (request.getSession().getAttribute("user") != null) {
    %>
    <h1>Welcome, ${ sessionScope.user.username }!</h1>
    <p>Here is your personal information:</p>
    <ul>
        <li>Username: ${ sessionScope.user.username }</li>
        <li>Email: ${ sessionScope.user.email }</li>
        <li>Phone: ${ sessionScope.user.phone }</li>
    </ul>
    <%
        } else {
            response.sendRedirect("login.jsp");
        }
    %>

    <a href="changePassword.jsp">Change Password</a>
</main>
</body>
<%@ include file="../common/footer.jsp" %>
<style>
    main {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    h1 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 20px;
    }

    p {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    li {
        margin-bottom: 5px;
    }

    main a {
        display: block;
        max-width: 200px;
        margin: 20px auto 0;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    a:hover {
        background-color: #0062cc;
    }

</style>
</html>


